var item = {},
	questionIndex = 0,
	dataList = [],
	swiper = null,
	xpopup = null;

$(() => {
	loadData();
	initListener();
})

initListener = () => {
	$("#load_layout").on('click', () => {
		loadData();
	});
	$("#answer_card").on('click', () => {
		onShowAnswerCard();
	});
	$("#before").on('click', () => {
		onBefore();
	});
	$("#next").on('click', () => {
		onNext();
	});
}

onBefore = () => {
	if (questionIndex > 0) {
		questionIndex--;
		swiper.slideTo(questionIndex, 500, false);
	} else {
		showToast('已经是第一题了')
	}
}

onNext = () => {
	if (questionIndex < dataList.length - 1) {
		questionIndex++;
		swiper.slideTo(questionIndex, 500, false);
	} else {
		showToast('已经是最后题了')
	}
}

onShowAnswerCard = () => {
	if (dataList && dataList.length > 0) {
		let itemHtml = `<div class="tag_box">`
		for (var i = 0; i < dataList.length; i++) {
			let obj = dataList[i];
			let userAnswer = obj.userAnswer;
			let bgColor = '#f0f2f6',
				texCor = '#999';
			if (userAnswer != '') {
				bgColor = '#1890ff';
				texCor = '#fff'
			}
			itemHtml +=
				`<div class="tag_item" style="background-color:${bgColor};color:${texCor}" onclick="getAnswerCardItem('${i}')">${i + 1}</div>`
		}
		itemHtml += `</div>`;
		//页面层
		xpopup = layer.open({
			type: 1,
			title: '答题卡',
			shadeClose: true,
			content: itemHtml,
			anim: 'up',
			style: 'position:fixed; bottom:0; left:0; width: 100%; padding:0px 0; border:none;border-top-left-radius: 1rem;border-top-right-radius: 1rem;'
		});
	}
}

getAnswerCardItem = (index) => {
	layer.close(xpopup);
	questionIndex = index;
	swiper.slideTo(questionIndex, 500, false);
}

loadData = () => {
	item = toObject(getValueByParam('item'));
	$("#test_name").html(item.paperName);
	$("#course_name").html(item.courseName);

	dataList = [];
	startLoading();
	$("#swiper_content").html('');
	let postData = {}
	queryErrorQuestion(postData, res => {
		if (res.code == 200) {
			setTimeout(() => {
				let data = res.data;
				data.forEach(e => {
					let examQuestionVo = e.examQuestionVo;
					examQuestionVo.forEach(ele => {
						ele['questionTypeId'] = e.questionTypeId;
						ele['paperId'] = e.paperId;
						dataList.push(ele)
					})
				});
				setData();
			}, 500)
		} else {
			setLoadState('stateUlr', loginFail());
		}
	})
}

setData = () => {
	hideLoading();
	$("#swiper_content").html('');
	if (ArrayEmpty(dataList)) {
		setLoadState('stateUlr', noData());
	} else {
		$("#error_count").html(dataList.length);
		let itemHtml = ``;
		dataList.forEach((e, i) => {
			
			let questionTypeId = e.questionTypeId;
			let questionTypeName = '单选';
			if (questionTypeId == '1') {
				questionTypeName = '单选'
			} else if (questionTypeId == '2') {
				questionTypeName = '多选'
			}
			
			let questionId = e.questionId;
			let questionOptionList = e.questionOptionList;

			let optionHtml = ``;
			let rightAnswer = [];
			let userAnswer = e.userAnswer;
			
			if (questionTypeId == '1') { //单选题
				for (var j = 0; j < questionOptionList.length; j++) {
					let optionObj = questionOptionList[j];
					let inputName = optionObj.examQuestionId;
					let forLabelId = optionObj.examQuestionOptionId;
					let optionName = optionObj.optionName;
					let isChoose = optionObj.isChoose;
					let isTrue = optionObj.isTrue;
					if (isTrue == '1') {
						rightAnswer.push(optionName)
					}

					optionHtml += `<div class="option_item option_disEnable">
										<input class="option_input"  type="radio" id="${forLabelId}" name="${inputName}"
											data-choose="${isChoose}" 
											data-type="radio" 
											data-pid="${questionId}"  
											data-aid="${forLabelId}"
											data-tid="${isTrue}" 
											${isChoose == '1' ? 'checked':''}/>
											
										<label class="option_label" for="${forLabelId}">
											<div class="option_text">${optionName}</div>
										</label>
									</div>`;
				}
			} else if (questionTypeId == '2') { //多选题
				for (var j = 0; j < questionOptionList.length; j++) {
					let optionObj = questionOptionList[j];
					let inputName = optionObj.examQuestionId;
					let forLabelId = optionObj.examQuestionOptionId;
					let optionName = optionObj.optionName;
					let isChoose = optionObj.isChoose;
					let isTrue = optionObj.isTrue;
					if (isTrue == '1') {
						rightAnswer.push(optionName)
					}

					optionHtml += `<div class="option_item option_disEnable">
										<input class="option_input"  type="checkbox" id="${forLabelId}" name="${inputName}"
											data-choose="${isChoose}" 
											data-type="checkbox" 
											data-pid="${questionId}"  
											data-aid="${forLabelId}"
											data-tid="${isTrue}" 
											${isChoose == '1' ? 'checked':''}
											/>
											
										<label class="option_label" for="${forLabelId}">
											<div class="option_text">${optionName}</div>
										</label>
									</div>`;
				}
			}

			itemHtml += `<div class="swiper-slide">
							<div class="list_item">
								<div class="list_item_status">${questionTypeName}</div>
								<div class="list_content">
									<label class="list_item_title_row">
										<div class="list_item_title_text">${i + 1}、${e.questionName}</div>
									</label>
									${optionHtml}
									<div style="display:block;" id="${questionId}">
										<div class="list_item_child right_answer">
											<span class="label">您的答案：</span>
											<span class="value price right_answer_val">${userAnswer.toString()}</span>
										</div>
										<div class="list_item_child">
											<span class="label">正确答案：</span>
											<span class="value">${rightAnswer.toString()}</span>
										</div>
										<div class="list_item_child">
											<span class="label">解析：</span>
											<span class="value">${e.explanation}</span>
										</div>
									</div>
									
								</div>
							</div>
						</div>`;
		})

		$("#swiper_content").html(itemHtml);
		MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
		swiper = new Swiper('.swiper_container', {
			initialSlide: questionIndex,
			pagination: '.swiper-pagination',
			slidesPerView: 'auto',
			autoHeight: false,
			paginationClickable: true,
			onSlideChangeEnd: (swiper) => {
				questionIndex = swiper.activeIndex;
			}
		});
	}
}
